<!-- oscar999  -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="author" content="oscar999">
		<title></title>
		<script>
			function handleFiles(files) {
				console.warn(files)
				if(files.length) {
					var file = files[0];
					var reader = new FileReader();
					reader.onload = function() {
						document.getElementById("filecontent").innerHTML = this.result;
					};
					reader.readAsText(file);
				}
			}

			function handleFilesImg(files) {
				for(var i = 0; i < files.length; i++) {
					var file = files[i];
					var imageType = /^image\//;

					if(!imageType.test(file.type)) {
						continue;
					}

					var img = document.createElement("img");
					img.classList.add("obj");
					img.file = file;
					// 假设 "preview" 是将要展示图片的 div
					document.getElementById("imgcontent").appendChild(img);

					var reader = new FileReader();
					reader.onload = (function(aImg) {
						return function(e) {
							aImg.src = e.target.result;
						};
					})(img);
					reader.readAsDataURL(file);
				}
			}
		</script>

	</head>

	<body>

		<input type="file" id="file" onchange="handleFiles(this.files)" />
		<input type="file" id="file" onchange="handleFilesImg(this.files)" />
		<div id="filecontent"></div>
		<div id="imgcontent">
		</div>
	</body>

</html>